<style include="settings-shared">
  [slot=checkbox] {
    margin-inline-start: 16px;
  }

  [slot=footer] {
    padding:0;
  }

  settings-avatar-icon {
    flex-shrink: 0;
    height: 40px;
    margin-inline-end: 16px;
    width: 40px;
  }

</style>

<cr-dialog id="dialog" close-text="$i18n{close}" show-on-attach>
  <div slot="title">$i18n{passwordMovePasswordsToAccountDialogTitle}</div>

  <div slot="body">
    <div>$i18n{passwordMovePasswordsToAccountDialogBodyText}</div>
    <dom-repeat id="devicePasswordList" items="[[passwordsToMove]]"
        class="cr-separators list-with-header">
      <template>
        <password-list-item entry="[[item]]"
            tabindex$="[[tabIndex]]" focus-row-index="[[index]]"
            first$="[[!index]]"
            last-focused="{{lastFocused_}}" list-blurred="{{listBlurred_}}"
            should-hide-more-actions-button>
          <cr-checkbox slot="checkbox" id="checkbox" checked="true"
              data-id$="[[item.deviceId_]]">
          </cr-checkbox>
        </password-list-item>
      </template>
    </dom-repeat>
  </div>

  <div slot="button-container">
    <cr-button class="cancel-button" id="cancelButton"
        on-click="onCancelButtonClick_">
      $i18n{passwordMoveMultiplePasswordsToAccountDialogCancelButtonText}
    </cr-button>
    <cr-button class="action-button" id="moveButton"
        on-click="onMoveButtonClick_">
      $i18n{passwordMoveMultiplePasswordsToAccountDialogMoveButtonText}
    </cr-button>
  </div>
  <div slot="footer" id="footer">
    <div class="cr-row two-line ">
      <settings-avatar-icon></settings-avatar-icon>
      <div class="flex cr-padded-text">
        <div class="secondary">[[accountEmail]]</div>
      </div>
    </div>
  </div>
</cr-dialog>
